<template>
  <view class="page">
    <view class="page-hd">
      <view class="search-area">
        <SearchBox placeholder="搜索商品名称、编号、规格、条码"></SearchBox>
      </view>
    </view>
    <view class="page-bd">
      <CardView :config="{toggleShow: true}">
        <template #hd>
          <view class="card-hd">
            <view class="title">{{ cardData.title }}</view>
            <view class="desc">{{ cardData.desc }}</view>
          </view>
        </template>
        <template #bd>
          <view class="form-item-area">
            <FormItemView
              v-for="detailItem in cardData.list"
              :data="{ label: detailItem.label+ ':', text: detailItem.text }"
              :labelWidth="isEn ? 240 : 120"
            ></FormItemView>
          </view>
        </template>
      </CardView>

      <CardView>
        <template #hd>
          <view class="card-hd">
            <view class="title"
              >{{ cardData2.title }}
              <text class="total">{{ cardData2.total }}</text></view
            >
          </view>
        </template>
        <template #bd>
          <view class="product-area">
            <ProductInfoView v-for="i in 3"></ProductInfoView>
          </view>
        </template>
      </CardView>
    </view>
    <view class="page-ft">
      <view class="button-area">
        <view
          class="ui-button button-style--default delete button-size--large"
          @click="handleDelete"
          >删除</view
        >
        <view
          class="ui-button button-style--primary button-size--large"
          @click="handleGoOn"
          >继续盘点</view
        >
      </view>
    </view>
  </view>
</template>

<script setup>
import SearchBox from '@/components/base-components/search-box/search-box.vue';
import CardView from '@/components/base-components/card-view/card-view.vue';
import FormItemView from '@/components/base-components/form-item-view/form-item-view.vue';
import ProductInfoView from '@/components/base-components/product-info-view/product-info-view.vue';
import useI18nStore from '@/store/modules/i18nStore';

const {language} = useI18nStore();

const cardData = reactive({
  title: '盘点单详情',
  desc: '2024-06-25 09:45',
    list:[
      {
        label: '单据编号',
        text: '20230101123456'
      },
      {
        label: '盘点范围',
        text: '仓库A'
      },
      {
        label: '仓库',
        text: '仓库A'
      },
      {
        label: '商品分类',
        text: '仓库A'
      },
      {
        label: '商品品牌',
        text: '仓库A'
      },
      {
        label: '商品',
        text: '苹果XXXX、苹果XXXX、苹果XXXX、苹果XXX、苹果XXXX、苹果XXXX、苹果XXXX'
      },
    ]
});

const cardData2 = reactive({
  title: '盘点单详情',
  total: '28',
  desc: '2024-06-25 09:45',
    list:[
      {
        label: '单据编号',
        text: '20230101123456'
      },
      {
        label: '盘点范围',
        text: '仓库A'
      },
      {
        label: '仓库',
        text: '仓库A'
      },
      {
        label: '商品分类',
        text: '仓库A'
      },
      {
        label: '商品品牌',
        text: '仓库A'
      },
      {
        label: '商品',
        text: '苹果XXXX、苹果XXXX、苹果XXXX、苹果XXX、苹果XXXX、苹果XXXX、苹果XXXX'
      },
    ]
});

const isEn = computed(() => {
  console.log('测试isEn', language, language.value, language.value === 'en');

  return language === 'en';
});
const handleGoOn = () => {
  console.log('继续盘点');
}
const handleDelete = () => {
  console.log('删除');
}
</script>

<style scoped lang="scss">
@import "@/static/scss/theme.scss";

.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #F4F8FB;

  // ::v-deep {
  //   .card-view {
  //     padding: 0 32rpx;
  //   }
  //   .form-item-view {
  //     justify-content: space-between;
  //     height: 96rpx;
  //     font-size: 26rpx;
  //     display: flex;
  //     align-items: center;

  //     & + .form-item-view {
  //       border-top: 1px solid $border-color;
  //     }
  //   }
  // }

  &-hd {
    background-color: #FEFEFF;
  }

  &-bd {
    // height: calc(100vh - 196rpx);
    padding: 16rpx 24rpx!important;
    flex: 1;
    overflow: auto;

    display: flex;
    flex-direction: column;
    gap: 16rpx;
  }

  &-ft {
    display: flex;
    height: 190rpx;
    padding: 20rpx 24rpx;
    justify-content: flex-end;
    border-top: 1rpx solid $border-color;
    gap: 24rpx;

    .ui-button {
      flex: 1;
    }
  }

  .search-area {
    padding: 16rpx 32rpx;
  }

  .card {

    &-hd {
      .title {
        font-size: 30rpx;
        line-height: 42rpx;
      }
      .desc {
        color: $text-l3-color;
        font-size: 24rpx;
        font-weight: 400;
      }
    }
  }

  // 样式覆盖
  ::v-deep {
    .card-view {
      // padding: 16rpx 24rpx!important;
    }
  }

  .form-item-area {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
  }

  .product-area {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 24rpx;
  }
  .ui-button {
    width: 168rpx;

    &.delete {
      color: $failed-color;
      border-color: $failed-color;
    }
  }
  .button-area {
    display: flex;
    gap: 24rpx;
  }
}
</style>
